/* 修改主内容区布局 */
.main-content {
    grid-template-areas:
        "pipeline database"
        "preview preview"
        "details details" !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 25px !important;
}

/* 确保流水线和数据库面板高度相同且可见 */
.pipeline-section, .database-section {
    height: 500px !important;
    min-height: 500px !important;
    overflow: auto !important;
    display: block !important;
    visibility: visible !important;
    margin-bottom: 25px !important;
}

/* 优化数据库面板内部布局 */
.database-panel {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--border-color) !important;
}

.database-header {
    padding: 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: white !important;
    z-index: 2 !important;
}

.db-tree {
    height: 300px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 15px !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: white !important;
}

.field-comparison {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    padding: 15px !important;
    background: white !important;
}

.comparison-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.comparison-table thead {
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 1 !important;
}

.comparison-table th {
    background: #f8f9fa !important;
    padding: 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--border-color) !important;
}

/* 修复预览和详情区域 */
.preview-section, .details-section {
    width: 100% !important;
}

.data-preview, .transform-details-panel {
    height: 100% !important;
    background: white !important;
}

/* 修复响应式布局问题 */
@media (max-width: 1400px) {
    .pipeline-container {
        flex-direction: column !important;
        overflow-y: auto !important;
        max-height: none !important;
    }

    .step-card {
        min-width: 100% !important;
    }
}

@media (max-width: 1200px) {
    .main-content {
        grid-template-areas:
            "pipeline database"
            "preview preview"
            "details details" !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 992px) {
    .main-content {
        grid-template-areas:
            "pipeline"
            "database"
            "preview"
            "details" !important;
        grid-template-columns: 1fr !important;
    }

    .pipeline-section, .database-section {
        height: auto !important;
        min-height: 500px !important;
    }
}

/* 确保所有面板都有适当的间距和边框 */
.pipeline-section > *, .database-section > *, .preview-section > *, .details-section > * {
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    background: white !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
}
